<template>
  <div class="home-layout">
    <aside class="sidebar">
      <h1>风行旅途</h1>
      <hr class="sidebar-divider" />
      <nav>
        <ul>
          <li>
            <a
              href="#"
              :class="{ active: activeTab === 'train' }"
              @click.prevent="setActive('train')"
              >火车购票</a
            >
          </li>
          <li>
            <a href="#" :class="{ active: activeTab === 'meal' }" @click.prevent="setActive('meal')"
              >火车餐</a
            >
          </li>
          <li>
            <a
              href="#"
              :class="{ active: activeTab === 'hotel' }"
              @click.prevent="setActive('hotel')"
              >酒店</a
            >
          </li>
        </ul>
      </nav>
    </aside>
    <header class="header">
      <div style="margin-right: auto">{{ currentUserName }},欢迎您！</div>
      <div class="header-nav">
        <a href="#" @click.prevent="goToHistoryOrder">历史订单</a>
        <a href="#" @click.prevent="goToMessages">消息中心</a>
        <a href="https://gitee.com/wangzi-ma/software-engineering-homework" target="_blank"
          >关于我们</a
        >
      </div>
      <div class="avatar-wrapper">
        <img class="avatar" src="/logo.png" alt="头像" />
        <ul class="dropdown-menu">
          <li><a href="#" @click.prevent="goToPersonalCenter">个人中心</a></li>
          <li><a href="#" @click.prevent="goToWallet">我的钱包</a></li>
          <li><a href="#" @click.prevent="logout">退出登录</a></li>
        </ul>
      </div>
    </header>
    <main class="main-content">
      <div class="hotel-search">
        <select v-model="selectedCity">
          <option disabled value="">选择城市</option>
          <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
        </select>
        <input v-model="hotelName" placeholder="输入酒店名（可不填）" />
        <select v-model="sortField">
          <option value="price">按价格</option>
          <option value="hotelRating">按评分</option>
        </select>
        <select v-model="sortOrder">
          <option value="asc">升序</option>
          <option value="desc">降序</option>
        </select>
        <button @click="onSearch">查询</button>
        <!--        <button @click="fetchHistory">历史订单</button>-->
      </div>
      <div v-if="loading">加载中...</div>
      <!-- 酒店列表 -->
      <div v-if="showHotelList">
        <div v-if="hotels.length === 0">暂无酒店数据</div>
        <ul class="hotel-list">
          <li
            v-for="hotel in hotels"
            :key="hotel.id"
            class="hotel-card"
            @click="showHotelDetail(hotel)"
          >
            <img src="/logo.png" alt="酒店图片" class="hotel-img" />
            <div class="hotel-info">
              <h3>{{ hotel.hotelName }}</h3>
              <p>{{ hotel.hotelAddress }}</p>
              <p>￥{{ hotel.price }} /晚</p>
              <p>评分：{{ hotel.hotelRating }} / 5</p>
              <p>剩余房间：{{ hotel.remainingRooms }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 酒店详情弹窗 -->
      <div v-if="hotelDetail" class="modal">
        <div class="modal-content">
          <h2>{{ hotelDetail.hotelName }}</h2>
          <p>{{ hotelDetail.hotelAddress }}</p>
          <p>￥{{ hotelDetail.price }} /晚</p>
          <p>评分：{{ hotelDetail.hotelRating }} / 5</p>
          <p>剩余房间：{{ hotelDetail.remainingRooms }}</p>
          <p>酒店详情：{{ hotelDetail.hotelDetail }}</p>

          <!-- 新增预订信息输入 -->
          <div class="booking-details">
            <label for="checkInDate">入住日期:</label>
            <input type="date" id="checkInDate" v-model="bookingCheckInDate" />

            <label for="checkOutDate">退房日期:</label>
            <input type="date" id="checkOutDate" v-model="bookingCheckOutDate" />

            <label for="paymentMethod">支付方式:</label>
            <select id="paymentMethod" v-model="bookingPaymentMethod">
              <option value="支付宝">支付宝</option>
              <option value="微信支付">微信支付</option>
              <option value="银行卡">银行卡</option>
            </select>
            <!-- 可以显示总金额，但这里不强制要求，后端会处理 -->
            <p v-if="bookingCheckInDate && bookingCheckOutDate && hotelDetail.price">
              总金额: ￥{{
                hotelDetail.price *
                  Math.max(
                    0,
                    Math.ceil(
                      (new Date(bookingCheckOutDate).getTime() -
                        new Date(bookingCheckInDate).getTime()) /
                        (1000 * 60 * 60 * 24),
                    ),
                  ) || 0
              }}
            </p>
          </div>

          <button @click.stop="onBook(hotelDetail.hotelId)">预订</button>
          <button @click.stop="hotelDetail = null">关闭</button>
        </div>
      </div>
      <!-- 历史订单列表 -->
      <!--      <div v-if="showHistory">
      <h3>历史订单</h3>
      <ul class="hotel-list">
      <li v-for="order in orders" :key="order.orderId" class="hotel-card" @click="showOrderDetail(order)">
      <img src="/logo.png" alt="酒店图片" class="hotel-img" />
        <div class="hotel-info">
          <h3>{{ order.hotelName }}</h3>
          <p>订单号: {{ order.orderId }}</p>
          <p>状态: {{ order.orderStatus }}</p>
          <p>入住日期: {{ order.checkInDate }}</p>
          <p>到期日期: {{ order.checkOutDate }}</p>
          <p>支付金额: ￥{{ order.paymentAmount }}</p>
        </div>
      </li>
    </ul>
  </div>-->
      <!-- 订单详情弹窗 -->
      <!--      <div v-if="orderDetail" class="modal">
        <div class="modal-content">
          <h2>{{ orderDetail.hotelName }}</h2>
          <p>订单号: {{ orderDetail.orderId }}</p>
          <p>状态: {{ orderDetail.orderStatus }}</p>
          <p>入住日期: {{ orderDetail.checkInDate }}</p>
          <p>到期日期: {{ orderDetail.checkOutDate }}</p>
          <p>支付金额: ￥{{ orderDetail.paymentAmount }}</p>
          <p>支付方式: {{ orderDetail.paymentMethod }}</p>
          <button
            v-if="orderDetail.orderStatus === '已预订' || orderDetail.orderStatus === '已入住'"
            @click.stop="onCancel(orderDetail.orderId)">退房</button>
          <button @click.stop="orderDetail = null">关闭</button>
        </div>
      </div>-->
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import api from '@/utils/api'

const router = useRouter()
const activeTab = ref('hotel') // 默认激活"酒店"

const cities = ref(['北京', '上海', '广州', '深圳', '杭州', '南京', '成都', '重庆']) // 可根据实际情况调整
const selectedCity = ref('')
const hotelName = ref('')

const hotels = ref<any[]>([])
const loading = ref(false)
const showHotelList = ref(true)
const hotelDetail = ref<any | null>(null)
const showHistory = ref(false)
const orders = ref<any[]>([])
const orderDetail = ref<any>(null)

// 高级搜索排序相关
const sortField = ref<'price' | 'hotelRating'>('price')
const sortOrder = ref<'asc' | 'desc'>('asc')

// 添加一个 ref 来存储当前用户ID，假设登录后会设置此ID
const currentUserId = ref<number | null>(null)
// 新增预订相关的响应式数据
const bookingCheckInDate = ref('')
const bookingCheckOutDate = ref('')
const bookingPaymentMethod = ref('支付宝') // 默认支付方式
const userBalance = ref(0)
const currentUserName = ref('')

// 在组件挂载时尝试从 localStorage 获取用户ID
onMounted(() => {
  const storedUserId = localStorage.getItem('userId') // 假设 userId 存储在 localStorage 中
  if (storedUserId) {
    currentUserId.value = parseInt(storedUserId)
  } else {
    // 如果 localStorage 中没有 userId，可以给一个默认值用于测试，或者提示用户登录
    console.warn('User ID not found in localStorage. Using dummy ID 1 for testing.')
    currentUserId.value = 1 // 仅用于测试，实际应用中应确保用户已登录并获取到真实ID
  }
  const storedUserName = localStorage.getItem('username')
  if (storedUserName) {
    currentUserName.value = storedUserName
    fetchUserBalance()
  }
})
async function onSearch() {
  if (!selectedCity.value) {
    alert('请选择城市')
    return
  }
  loading.value = true
  showHistory.value = false
  showHotelList.value = true
  hotelDetail.value = null
  orderDetail.value = null // 确保关闭订单详情弹窗
  try {
    let res
    if (hotelName.value.trim()) {
      // 有酒店名，通过酒店名和选择的城市来得到酒店
      // 对应后端 GET /api/hotels/{hotelName}?city={city}
      res = await api.get(`/api/hotels/${hotelName.value.trim()}`, {
        params: { city: selectedCity.value },
      })
      hotels.value = Array.isArray(res.data) ? res.data : [res.data]
    } else {
      // 没有酒店名，按城市推荐
      // 对应后端 GET /api/hotels/search?city={city}
      res = await api.get('/api/hotels/search', { params: { city: selectedCity.value } })
      hotels.value = res.data
    }
    // 高级搜索排序（前端实现）
    if (sortField.value && sortOrder.value) {
      hotels.value.sort((a, b) => {
        const field = sortField.value
        if (sortOrder.value === 'asc') {
          return (a[field] ?? 0) - (b[field] ?? 0)
        } else {
          return (b[field] ?? 0) - (a[field] ?? 0)
        }
      })
    }
  } catch (e) {
    hotels.value = []
    alert('查询失败')
    console.error('Search error:', e) // 添加错误日志
  } finally {
    loading.value = false
  }
}
function showHotelDetail(hotel: any) {
  hotelDetail.value = hotel
  // 每次打开详情时，重置预订日期和支付方式，避免上次的残留
  bookingCheckInDate.value = ''
  bookingCheckOutDate.value = ''
  bookingPaymentMethod.value = '支付宝'
}
/*点击预定按钮*/
async function onBook(hotelId: number) {
  if (!confirm('确定要预订该酒店吗？')) return
  // 1. 校验日期是否选择
  if (!bookingCheckInDate.value || !bookingCheckOutDate.value) {
    alert('请选择入住日期和退房日期。')
    return
  }
  // 2. 校验退房日期是否晚于入住日期
  const checkIn = new Date(bookingCheckInDate.value)
  const checkOut = new Date(bookingCheckOutDate.value)
  if (checkIn >= checkOut) {
    alert('退房日期必须晚于入住日期。')
    return
  }
  // 3. 计算预订晚数
  const diffTime = Math.abs(checkOut.getTime() - checkIn.getTime())
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) // 晚数

  // 4. 计算支付金额
  const paymentAmount = (hotelDetail.value?.price || 0) * diffDays
  if (paymentAmount <= 0) {
    alert('预订金额必须大于0。')
    return
  }
  // 5. 校验余额是否足够
  if (userBalance.value < paymentAmount) {
    alert('钱包余额不足，无法预订。')
    return
  }
  // 6. 确保 currentUserId 已加载
  if (currentUserId.value === null) {
    alert('用户ID未加载，无法预订。请尝试重新登录或刷新页面。')
    return
  }
  // 构造请求体，匹配后端 HotelBookingRequest
  const requestBody = {
    userId: currentUserId.value,
    hotelId: hotelId,
    hotelName: hotelDetail.value?.hotelName, // 从 hotelDetail 获取酒店名称
    checkInDate: bookingCheckInDate.value,
    checkOutDate: bookingCheckOutDate.value,
    paymentAmount: paymentAmount,
    paymentMethod: bookingPaymentMethod.value,
  }

  try {
    // 使用统一订单服务创建酒店订单
    const response = await api.post('/api/orders/hotel', {
      userName: currentUserName.value,
      hotelId: hotelId,
      hotelName: hotelDetail.value?.hotelName,
      roomType: '标准间',
      checkInDate: bookingCheckInDate.value,
      checkOutDate: bookingCheckOutDate.value,
      roomCount: 1,
      totalPrice: paymentAmount,
      guestName: currentUserName.value,
      guestPhone: '',
      guestIdCard: '',
      remark: '',
    })

    const result = response.data
    if (result.success) {
      // 创建消息通知
      const messageData = {
        userName: currentUserName.value,
        messageType: 2, // 酒店消息类型
        actionType: '酒店预订成功',
        content: `您已成功预订 ${hotelDetail.value.hotelName} 酒店（${hotelDetail.value.hotelAddress}），入住日期：${bookingCheckInDate.value}，退房日期：${bookingCheckOutDate.value}，共 ${diffDays} 晚。请携带有效证件按时入住，风行旅途祝您入住愉快！`,
      }

      await api.post('/api/message/set', messageData)

      alert('预订成功')
      hotelDetail.value = null // 关闭弹窗
      // 预订成功后，重置预订相关的输入字段
      bookingCheckInDate.value = ''
      bookingCheckOutDate.value = ''
      bookingPaymentMethod.value = '支付宝'
      onSearch()
      fetchUserBalance() // 预订成功后刷新余额
    } else {
      throw new Error(result.message || '订单创建失败')
    }
  } catch (error) {
    console.error('预订失败:', error)
    alert('预订失败，请稍后重试')
  }
}
/*async function fetchHistory() {
  loading.value = true
  showHotelList.value = false
  showHistory.value = true
  hotelDetail.value = null
  orderDetail.value = null; // 确保关闭订单详情弹窗
  try {
    // 对应后端 GET /api/hotels/history?userId=456
    if (currentUserId.value === null) {
      alert('用户ID未加载，无法获取历史订单。');
      loading.value = false;
      return;
    }
    const res = await api.get(`/api/hotel-orders/user/${currentUserId.value}`)
    orders.value = res.data
  } catch (e) {
    orders.value = []
    alert('获取历史订单失败')
    console.error('Fetch history error:', e); // 添加错误日志
  } finally {
    loading.value = false
  }
}
function showOrderDetail(order: any) {
  orderDetail.value = order
}
async function onCancel(orderId: number) {
  if (!confirm('确定要取消该订单并退款吗？')) return
  try {
    // 对应后端 POST /api/hotels/cancel, 请求参数: orderId
    await api.post('/api/hotels/cancel', null, { params: { orderId } }) // orderId 作为 URL 参数发送
    alert('取消成功')
    orderDetail.value = null
    fetchHistory() // 取消成功后刷新历史订单
  } catch (e) {
    alert('取消失败')
    console.error('Cancel order error:', e); // 添加错误日志
    if (e.response && e.response.data) {
      alert('取消失败: ' + (e.response.data.message || e.response.data));
    }
  }
}*/
async function fetchUserBalance() {
  if (!currentUserName.value) return
  try {
    const res = await api.get(`/api/users?username=${encodeURIComponent(currentUserName.value)}`)
    // 从用户对象中提取余额字段
    userBalance.value = res.data.balance || 0
  } catch (e) {
    userBalance.value = 0
    console.error('获取余额失败', e)
  }
}

function goToHistoryOrder() {
  router.push({
    path: '/history',
    query: { username: currentUserName.value },
  })
}
function goToMessages() {
  router.push({
    path: '/messages',
    query: { username: currentUserName.value },
  })
}
function goToWallet() {
  // 跳转到钱包页面并传递昵称参数
  router.push({
    path: '/wallet', // 钱包页面路由路径
    query: { username: currentUserName.value }, // 传递参数
  })
}
function goToPersonalCenter() {
  router.push({
    path: '/center',
    query: { username: currentUserName.value },
  })
}
function logout() {
  /*退出登录 */
  // 可添加清除登录状态的逻辑，例如 localStorage 清理 token 和 userId
  localStorage.removeItem('token')
  localStorage.removeItem('userId') // 清除存储的用户ID
  currentUserId.value = null // 清除当前用户ID状态
  router.push('/login')
}
function setActive(tab: string) {
  activeTab.value = tab
  if (tab === 'hotel') {
    // 当点击"酒店"时，确保显示酒店列表，隐藏历史订单
    // router.push('/hotel') // 如果当前页面就是 /hotel，此行可省略，避免重复导航
    showHotelList.value = true
    showHistory.value = false
    hotelDetail.value = null // 关闭可能打开的酒店详情弹窗
    orderDetail.value = null // 关闭可能打开的订单详情弹窗
  } else if (tab === 'train') {
    router.push('/home') // 回到主界面，也就是火车购票界面
  } else if (tab === 'history') {
    // 当点击"历史轨迹"时，调用获取历史订单的函数，并确保显示历史订单列表
    //fetchHistory(); // fetchHistory 会自动设置 showHistory.value = true 和 showHotelList.value = false
    hotelDetail.value = null // 关闭可能打开的酒店详情弹窗
    orderDetail.value = null // 关闭可能打开的订单详情弹窗
  } else if (tab === 'meal') {
    router.push('/meal') // 当前页可写死或省略
  }
}
</script>

<style scoped>
/* 添加重置样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* 外部布局样式（来自HomeView.vue） */
.home-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  transition: grid-template-columns 0.3s ease;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    'sidebar header'
    'sidebar main';
  height: 100vh;
  width: 100vw;
}
.home-layout.collapsed {
  grid-template-columns: 60px 1fr;
}
/* 左侧边栏 */
.sidebar {
  grid-area: sidebar;
  background-color: #0086f6;
  color: white;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: width 0.3s ease;
  overflow: hidden;
  position: relative;
}
.sidebar-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 8px 0 16px;
}
.sidebar li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 10px;
  margin-top: 8px;
}
.sidebar h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  width: 100%;
}
.sidebar li {
  margin: 8px 0;
}
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.sidebar a.active {
  background-color: rgba(255, 255, 255, 0.25);
  font-weight: bold;
}

/* 右上角头部 */
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
.header-nav {
  display: flex;
  margin-right: 20px;
}
.header-nav a {
  margin-right: 20px;
  color: #333;
  text-decoration: none;
}
.header-nav a:hover {
  text-decoration: underline;
}
/* 头像 */
.avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-top: 10px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  transition: box-shadow 0.3s;
}
.avatar:hover {
  box-shadow: 0 0 8px rgba(0, 134, 246, 0.5);
}
/* 头像下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  min-width: 140px;
  display: none;
  z-index: 100;
}
.dropdown-menu li {
  padding: 10px 20px;
}
.dropdown-menu li a {
  text-decoration: none;
  color: #333;
  display: block;
  transition: background 0.2s;
}
.dropdown-menu li:hover {
  background-color: #f0f0f0;
}
/* 显示菜单：鼠标悬停时 */
.avatar-wrapper:hover .dropdown-menu {
  display: block;
}

/* 中间内容 */
.main-content {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px 32px 32px 32px;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(200, 230, 255, 0.13) 100%);
  gap: 32px;
}
.hotel-search {
  margin-bottom: 32px;
  display: flex;
  gap: 18px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 134, 246, 0.1);
  padding: 28px 32px;
  align-items: center;
  backdrop-filter: blur(6px);
  border: 1.5px solid #b3d8ff;
}
.hotel-search select,
.hotel-search input {
  padding: 14px 18px;
  font-size: 17px;
  border: 1.5px solid #b3d8ff;
  border-radius: 10px;
  background: rgba(249, 249, 255, 0.95);
  color: #222;
  transition:
    border 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0, 134, 246, 0.07);
}
.hotel-search select:focus,
.hotel-search input:focus {
  border: 1.5px solid #0086f6;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 134, 246, 0.13);
}
.hotel-search button {
  padding: 0 28px;
  height: 44px;
  background: linear-gradient(90deg, #0086f6 60%, #4fc3f7 100%);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 134, 246, 0.13);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.1s;
  position: relative;
  overflow: hidden;
}
.hotel-search button:hover {
  background: linear-gradient(90deg, #0075d9 60%, #00c6fb 100%);
  box-shadow: 0 6px 18px rgba(0, 134, 246, 0.18);
  transform: scale(1.04);
}
.hotel-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.hotel-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 134, 246, 0.1);
  padding: 22px 18px;
  width: 340px;
  display: flex;
  gap: 18px;
  cursor: pointer;
  align-items: flex-start;
  transition:
    box-shadow 0.22s,
    transform 0.18s,
    background 0.18s;
  border: 1.5px solid #e3f2fd;
  position: relative;
}
.hotel-card:hover {
  box-shadow: 0 8px 32px rgba(0, 134, 246, 0.18);
  background: rgba(230, 245, 255, 0.98);
  transform: scale(1.035);
  border: 1.5px solid #90caf9;
}
.hotel-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 134, 246, 0.1);
  background: #f0f8ff;
}
.hotel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hotel-info h3 {
  margin-bottom: 4px;
  font-size: 20px;
  color: #0086f6;
}
.hotel-info p {
  font-size: 15px;
  color: #333;
}
.hotel-info button {
  margin-top: 8px;
  background: linear-gradient(90deg, #0086f6 60%, #4fc3f7 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 134, 246, 0.13);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.1s;
}
.hotel-info button:hover {
  background: linear-gradient(90deg, #0075d9 60%, #00c6fb 100%);
  box-shadow: 0 6px 18px rgba(0, 134, 246, 0.18);
  transform: scale(1.04);
}
/* 弹窗样式 */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.modal-content {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: 38px 32px;
  min-width: 340px;
  min-height: 180px;
  box-shadow: 0 8px 32px rgba(0, 134, 246, 0.18);
  backdrop-filter: blur(8px);
  border: 1.5px solid #b3d8ff;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.modal-content h2 {
  color: #0086f6;
  margin-bottom: 10px;
}
.modal-content button {
  margin-top: 10px;
  background: linear-gradient(90deg, #0086f6 60%, #4fc3f7 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 22px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 134, 246, 0.13);
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.1s;
}
.modal-content button:hover {
  background: linear-gradient(90deg, #0075d9 60%, #00c6fb 100%);
  box-shadow: 0 6px 18px rgba(0, 134, 246, 0.18);
  transform: scale(1.04);
}
.booking-details label {
  font-weight: bold;
  color: #0086f6;
  margin-right: 8px;
}
.booking-details input,
.booking-details select {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #b3d8ff;
  font-size: 15px;
  background: rgba(249, 249, 255, 0.95);
  color: #222;
  margin-right: 12px;
}
.booking-details input:focus,
.booking-details select:focus {
  border: 1.5px solid #0086f6;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 134, 246, 0.13);
}
</style>
